#carousel
    width: 100%
    height: 100%
    img
        width: 100%
        height: 100%
        object-fit: cover
    .carousel-box
        display: none
        height: 100%
        width: 100%
        overflow: hidden
        .anim-model
            position: absolute;
            bottom:0; 
            left: 40%; 
            height: 70%
            +maxWidth600()
                width : 100%
                left: 35%; 
            img
                width: auto
                -webkit-filter: drop-shadow(9px 18px 6px rgba(0,0,0,.3))
                filter: drop-shadow(9px 18px 6px rgba(0,0,0,.3)) 
        .carousel-video
            object-fit: cover
            width : 100%
            height: 100%
        .site-info
            position: absolute
            bottom: 1rem
            padding: 0
            width: 100%
            .site-title,
            .site-subtitle
                text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
                line-height: 1.4
                width: 70%
                overflow: hidden
                a
                    color: var(--white)
                    border-radius: 5px
                    cursor: pointer
                    padding: 0 3px
                    &:hover
                        background: rgba(white, .5)
                        transition: background 1s;
                        -webkit-transition: background 1s; /* Safari */
                .info-link
                    background: linear-gradient(to bottom , rgba(0,0,0, 0) 70%, rgba(160,216,120, 0.5) 70% 90%, rgba(white, 0) 90%); 
                    transition: background 2s;
                    -webkit-transition: background 2s; /* Safari */
            .site-title
                margin: 2rem
                letter-spacing: 4px
                color: var(--white)
                font-size: 2vw
                +maxWidth600()
                    font-size: 6vw
                    margin: 2rem 1rem
                
            .site-subtitle
                width: 26%
                letter-spacing: 1px
                margin: 2rem
                color: var(--white)
                font-size: 1.5vw
                opacity : .8
                font-weight: normal
                +maxWidth600()
                    width: 75%
                    font-size: 5vw
                    margin: 2rem 1rem
                    
    #carousel-indictors
        // text-align:center
        position: absolute
        bottom: 1rem
        right: 1rem
        margin: 2rem
        +maxWidth600()
            margin: 2rem 0rem
        .carousel-dot 
            cursor: pointer
            height: 20px
            width: 20px
            margin: 10px 0 0 0
            background-color: var(--light-grey)
            border-radius: 50%
            display: block
            opacity : .3
            transition: background-color 0.6s ease
            +maxWidth600()
                height: 15px
                width: 15px
        .active, .carousel-dot:hover 
            // background-color: var(--white)
            opacity : 1
    /* Fading animation */
    .fade
        -webkit-animation-name: fade;
        -webkit-animation-duration: .5s;
        animation-name: fade;
        animation-duration: .5s;

    @-webkit-keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
    }

    @keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
    }